<template>
  <div class="homeIndex">
    <div class="cardBox">
      <div class="cardLine">
        <div class="numBox pendProcess">
          <p class="name">待处理</p>
          <p class="num">{{ statisticsData.pendingCount || 0 }}</p>
        </div>
        <div style="display: flex;margin-top: 30px;">
          <div class="handle" @click="jumpUrl('/shop/approve')" style="margin-right: 40px;">待审核店铺
            {{ statisticsData.shopAuditCount || 0 }}</div>
          <div class="handle" @click="jumpUrl('/goods/list')">待审核商品 {{ statisticsData.productAduitCount || 0 }}</div>
        </div>
        <div class="handle" @click="jumpUrl('/order/afterSales')" style="margin-top: 19px;">待审核售后
          {{ statisticsData.orderReturnCount || 0 }}</div>
      </div>
      <div class="cardLine">
        <div class="numBox transactionVolume">
          <p class="name">总销售额</p>
          <p class="num">￥{{ formatNumber(statisticsData.totalAmount) || 0 }}</p>
        </div>
        <div class="saleBox">
          <p class="rate">昨日销售额<span>￥{{ formatNumber(statisticsData.yesterdayAmount) || 0 }}</span></p>
          <p class="rate">今日销售额<span>￥{{ formatNumber(statisticsData.todayAmount) || 0 }}</span></p>
        </div>
      </div>
      <div class="cardLine">
        <div class="numBox numberOrders">
          <p class="name">总支付笔数</p>
          <p class="num">{{ statisticsData.orderCount || 0 }}</p>
        </div>
        <!-- <div class="rateBox">
          <p class="rate">周同比<span class="up">12%</span></p>
          <p class="rate">日环比<span class="down">12%</span></p>
        </div> -->
        <div class="saleBox">
          <p class="rate">昨日支付笔数<span>{{ statisticsData.yesterdayOrderCount || 0 }}</span></p>
          <p class="rate">今日支付笔数<span>{{ statisticsData.todayOrderCount || 0 }}</span></p>
        </div>
      </div>
      <div class="cardLine">
        <div class="numBox numberVisitors">
          <p class="name">商品总量</p>
          <p class="num">{{ statisticsData.goodsNum || 0 }}</p>
        </div>
        <!-- <div class="rateBox">
          <p class="rate">转化率<span class="up">12%</span></p>
          <p class="rate">日环比<span class="down">12%</span></p>
        </div> -->
        <div class="saleBox">
          <p class="rate">30内上架数量<span>{{ statisticsData.goodNum || 0 }}</span></p>
          <p class="rate">今日上架数量<span>{{ statisticsData.todayGoodsNum || 0 }}</span></p>
        </div>
      </div>
      
    </div>
    <div class="saleProduct">
      <div class="saleBox">
        <div class="titleSearch">
          <p class="title">销售额统计</p>
          <el-date-picker
            v-model="saleDate"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :picker-options="pickerOptions"
            size="mini"
            :clearable="false"
            @change="changeSaleDate"
            >
          </el-date-picker>
        </div>
        <line-bar v-if="orderData" :dataSource="orderData"></line-bar>
      </div>
      <div class="productBox-wrap">
      <div class="productBox">
          <div class="titleSearch">
            <p class="title">门店销售额排名</p>
            <el-date-picker
              v-model="rankingDate"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :picker-options="pickerOptions"
              size="mini"
              :clearable="false"
              @change="changeProductDate"
              >
            </el-date-picker>
          </div>
          <div class="scrollBox">
            <div class="tableBox">
              <div class="comLine" v-for="(item, index) in shopList" :key="item.shopId">
                <p class="name">
                  <span>{{ index + 1 }}</span>{{ item.shopName }}
                </p>
                <p class="num">{{ formatNumber(item.total) }}</p>
              </div>
            </div>
          </div>
        </div>
          <div class="categoryBox">
            <div class="titleSearch">
              <p class="title">销售额类别占比</p>
              <el-date-picker
                v-model="salesRatioDate"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                :picker-options="pickerOptions"
                size="mini"
                :clearable="false"
                @change="changeSalesRatioDate"
              >
            </el-date-picker>
            </div>
            <div class="pieTable">
              <div class="pieBox">
                <pie v-if="salesData" :dataSource="salesData" />
              </div>
          </div>
      </div>
    </div>
    <!-- <div class="onlineCategory">
      <div class="onlineBox">
        <div class="titleSearch">
          <p class="title">线上热门搜索</p>
        </div>
        <el-table
          :data="onlineData"
          :header-cell-style="{ background: '#F3F3F3' }"
          height="236"
          class="onlineTableBox"
          size="mini"
        >
          <el-table-column
            type="index"
            width="50"
            label="排名"
            align="center"
          ></el-table-column>
          <el-table-column prop="orderId" label="搜索关键词" align="center">
            <template slot-scope="scope">
              <span style="color: #45ab49">化肥</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="account"
            label="用户数"
            align="center"
          ></el-table-column>
          <el-table-column prop="mobile" label="周涨幅" sortable align="center">
            <template slot-scope="scope">
              <span>23% <i class="el-icon-bottom"></i></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
       -->
      
    </div>
  </div>
</template>
<script>
import LineBar from "./components/lineBar";
import Pie from "./components/pie";
import {formatNumber} from '@u/index'
export default {
  components: { LineBar, Pie },
  data() {
    let firatData = this.$dayjs().subtract(11, 'month')
    let lastData = this.$dayjs()
    return {
      formatNumber,
      saleDate: [firatData,lastData], //销售额统计-日期
      rankingDate: [firatData,lastData], //销售额排名-日期
      salesRatioDate:[firatData,lastData],  //销售额占比-日期
      statisticsData: {},
      orderData: null,
      salesData:null,
      shopList: [],
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && !maxDate) {
              const oneYear = 365 * 24 * 60 * 60 * 1000;
              this.pickerOptions.disabledDate = time => {
                return time.getTime() < minDate.getTime() || time.getTime() > minDate.getTime() + oneYear;
              };
            } else {
              this.pickerOptions.disabledDate = () => false;
            }
        },
        disabledDate: (time) => {
            if (this.selectData) {
            	return time.getTime() > new Date() || time.getTime() > this.selectData + 30 * 24 * 3600 * 1000 || time.getTime() < this.selectData - 30 * 24 * 3600 * 1000;
          	} else {
            	return time.getTime() > new Date();
          	}
        }
      },
    };
  },
  mounted() {
    this.getCount()
    this.getOrderList(this.saleDate)
    this.getTopShopList(this.rankingDate);
    this.getSalesRatio(this.salesRatioDate);
  },
  methods: {
    
    jumpUrl(path, query) {
      this.$router.push({ path, query })
    }
  },
};
</script>
<style lang="scss" scoped>
.homeIndex {
  width: 100%;
  padding-bottom: 31px;
  box-sizing: border-box;

  .cardBox {
    width: 100%;
    display: flex;

    .cardLine {
      // width: 397px;
      width: 25%;
      height: 186px;
      background: #ffffff;
      border: 1px solid #e9eaf8;
      border-radius: 4px;
      padding: 27px 32px 16px 15px;
      box-sizing: border-box;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }

      .numBox {
        width: 100%;
        position: relative;
        padding-left: 21px;
        box-sizing: border-box;

        &::after {
          content: "";
          display: block;
          width: 48px;
          height: 47px;
          background: url(~@/assets/images/transaction_volume.png) no-repeat;
          background-size: cover;
          position: absolute;
          top: 0;
          right: 4px;
        }

        &.transactionVolume {
          &::after {
            background: url(~@/assets/images/transaction_volume.png) no-repeat;
            background-size: cover;
          }
        }

        &.numberOrders {
          &::after {
            background: url(~@/assets/images/number_orders.png) no-repeat;
            background-size: cover;
          }
        }

        &.numberVisitors {
          &::after {
            background: url(~@/assets/images/number_visitors.png) no-repeat;
            background-size: cover;
          }
        }

        &.pendProcess {
          &::after {
            background: url(~@/assets/images/pend_process.png) no-repeat;
            background-size: cover;
          }
        }

        .name {
          padding: 2px 6px 10px 0;
          box-sizing: border-box;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #b1b1b1;
        }

        .num {
          font-size: 32px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
        }
      }

      .rateBox {
        width: 100%;
        padding: 27px 7px 10px 24px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 11px;

        .rate {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #8d8d8d;

          span {
            margin-left: 20px;
            padding-left: 14px;
            box-sizing: border-box;
            position: relative;

            &::before {
              content: "";
              display: block;
              border: 6px solid transparent;
              position: absolute;
              top: 50%;
              left: 0;
            }

            &.up {
              &::before {
                border-bottom-color: #45ab49;
                margin-top: -9px;
              }
            }

            &.down {
              &::before {
                border-top-color: #f9590b;
                margin-top: -3px;
              }
            }
          }
        }
      }

      .saleBox {
        border-top: 1px solid #f0f0f0;
        padding-top: 11px;
        margin-top: 27px;
        padding-left: 21px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #8d8d8d;
        display: flex;
        justify-content: space-between;
      }

      .handle {
        padding-left: 18px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #8d8d8d;
        cursor: pointer;

        &.orderHandle {
          margin: 33px 0 17px 0;
        }

        &:hover {
          color: #45ab49;
        }
      }
    }
  }

  .titleSearch {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #393939;
      position: relative;
      padding-left: 20px;
      box-sizing: border-box;

      &::before {
        content: "";
        display: block;
        width: 6px;
        height: 28px;
        // background: url(~@/assets/images/title_line.png) no-repeat;
        background: #45ab49;
        background-size: cover;
        position: absolute;
        top: 50%;
        margin-top: -13px;
        left: 0;
      }
    }

    .yearBox {
      width: 100px;
    }

    .yearRangeBox {
      width: 210px;
    }
  }

  .saleProduct {
    width: 100%;
    display: flex;
    margin: 23px 0 24px;

    .saleBox {
      // width: 1034px;
      width: 66%;
      height: 711px;
      background: #ffffff;
      border: 1px solid #e9eaf8;
      border-radius: 4px;
      padding: 20px 35px 12px 31px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    .productBox-wrap{
      flex: 1;
      .productBox {
        // width: 595px;
        height: 331px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e9eaf8;
        border-radius: 4px;
        margin-left: 20px;
        padding: 20px 18px 12px 18px;
        box-sizing: border-box;
  
        .scrollBox {
          width: 100%;
          height: 249px;
          margin-top: 24px;
          box-sizing: border-box;
          overflow-y: auto;
  
          &::-webkit-scrollbar {
            display: none;
          }
        }
  
        .tableBox {
          width: 100%;
          padding-right: 12px;
          box-sizing: border-box;
  
          .comLine {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 26px;
  
            &:last-child {
              margin-bottom: 0;
            }
  
            .name {
              width: 80%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #6e6e6e;
  
              span {
                vertical-align: middle;
                display: inline-block;
                width: 16px;
                height: 16px;
                background: #45ab49;
                border-radius: 50%;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #ffffff;
                text-align: center;
                line-height: 16px;
                margin-right: 8px;
              }
            }
  
            .num {
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 200;
              color: #6e6e6e;
            }
          }
        }
      }
      .categoryBox {
        height: 360px;
        background: #ffffff;
        border: 1px solid #e9eaf8;
        border-radius: 4px;
        margin-left: 20px;
        padding: 22px 33px 12px 34px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
      .pieTable {
        flex: 1;
        width: 100%;
        // height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .pieBox {
          width: 100%;
          height: 100%;
          // padding-top: 12px;
          box-sizing: border-box;
          // margin-right: 47px;
        }

        .categoryTableBox {
          width: 595px;
        }
      }
    }
    }
  }

  .onlineCategory {
    width: 100%;
    display: flex;

    .onlineBox {
      // width: 647px;
      width: 40%;
      height: 315px;
      background: #ffffff;
      border: 1px solid #e9eaf8;
      border-radius: 4px;
      padding: 24px 25px 12px 32px;
      box-sizing: border-box;

      .onlineTableBox {
        width: 100%;
        margin-top: 18px;
      }
    }

    
  }
}</style>
<style lang="scss">.onlineTableBox,
.categoryTableBox {
  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      display: none;
    }
  }
}</style>